var Slider;

Slider = function() {
  this.element = '.action-slider';
  this.btnPrev = $(this.element).find('.btn-prev');
  this.btnNext = $(this.element).find('.btn-next');
  this.page = 1;
  this.num;
  this.init();
};

Slider.prototype = {
  init: function() {
    var that;
    that = this;
    $(that.element).each(function() {
      var self;
      self = $(this);
      that.num = self.find('li').length;
      self.find('ul').css({
        "width": that.num * 100 + "%"
      });
      self.find('li').css({
        "width": 100 / that.num + "%"
      });
    });
    that.btnNext.on({
      "click": function() {
        var self;
        self = $(this);
        that._next(self.siblings().find("ul"));
      }
    });
    that.btnPrev.on({
      "click": function() {
        var self;
        self = $(this);
        that._prev(self.siblings().find("ul"));
      }
    });
  },
  _next: function(obj, callback) {
    if (this.page < this.num) {
      obj.animate({
        "left": -100 * this.page + "%"
      }, 'slow', 'swing', function() {
        callback;
      });
      this.page++;
    }
  },
  _prev: function(obj, callback) {
    if (this.page > 1) {
      this.page = this.page - 1;
      obj.animate({
        "left": -100 * (this.page - 1) + "%"
      }, 'slow', 'swing', function() {
        callback;
      });
      console.log(this.page);
    }
  }
};

new Slider;
